<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-home.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-2 p-4 rounded shadow-sm bg-white">
        <div class="border-bottom border-dark">
            <h4><i class="fa fa-football-ball"></i>我的足迹</h4>
        </div>
        <div id="userTracks">

        </div>
    </div>
    <div id="pagenav">

    </div>
</div>

<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>

    function buildpage(result) {
        var $userTracks = $("#userTracks");
        $userTracks.empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            if (item.type === true) {
                //blog
                $("<p class='mb-0 border-bottom border-gray'><span class='text-muted'>"+new Date(item.readtime).toLocaleString()+"</span><p>浏览文章：<a class='text-info' href='/blog/" + item.typeid + "'>" + item.title + "</a></p></p>").appendTo($userTracks);
            } else {
                //question
                $("<p class='mb-0 border-bottom border-gray'><span class='text-muted'>"+new Date(item.readtime).toLocaleString()+"</span><p>浏览问题：<a class='text-info' href='/question/" + item.typeid + "'>" + item.title + "</a></p></p>").appendTo($userTracks);
            }
        });
    }

    function buildpage_pagenav(result) {
        var pagenav = $("#pagenav");
        pagenav.empty();

        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if (result.extend.pageInfo.pageNum === item) {
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function () {
                toPage_blogs(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo(pagenav);
    }

    function toPage(pn) {
        $.ajax({
            url: '/getUserTracks/' + pn,
            type: 'GET',
            success: function (result) {
                if (result.extend.pageInfo.list.length > 0) {
                    buildpage(result);
                    buildpage_pagenav(result);
                } else {
                    toastr.info("您还没有浏览任何文章或提问，快去学习吧！");
                }
            }
        });
    }

    $(function () {
        toPage(1);
    });
</script>

</body>

</html>
